<template>
	<view class="history_Apply">
		<xbd-pages-content title="历史申请">
			<template #content>
				<view class="content">
					<view class="choose">
						<view class="two">
							<view class="date">
								<!-- #ifdef APP-PLUS || H5 -->
								<picker fields="day" mode="date" :value="date" :start="startDate" :end="endDate"
									@change="bindDateChange">
									<view class="uni-input">
										<view class="">
											<image class="date2-img" src="@/static/images/date.svg"></image>
											<text>{{date}}</text>
										</view>
									</view>
								</picker>
								<!-- #endif -->
								<!-- #ifndef APP-PLUS || H5 -->
								<xbd-date-picker fields="day" :date="date" :visible.sync="visible1"
									@setDate="setDateChange">
									<template>
										<view class="date2" @click="visible1 = true">
											<image class="date2-img" src="@/static/images/common/date.svg" mode="">
											</image>
											<text>{{ date }}</text>
										</view>
									</template>
								</xbd-date-picker>
								<!-- #endif -->
							</view>
							<xbd-select :carId.sync="type" :visible.sync="visible" :infoList="typeArr"
								@selectChoose="searchList">
								<template>
									<view class="select" @click="visible = true">
										<text> {{type || '请选择'}} </text>
										<image class="image" src="@/static/images/health/right.svg" mode="">
										</image>
									</view>
								</template>
							</xbd-select>
						</view>
						<text>共{{total}}条</text>
					</view>
					<uni-list :border="false">
						<xbd-house-card v-for="item in showList" :key="item._id" :myInfo="item"
							@clickHouseCard="details(item._id)"></xbd-house-card>
						<xbd-null-list v-if="!showList.length"></xbd-null-list>
						<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore"></xbd-loading-more>
					</uni-list>

				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		House
	} from '@/api/index.js';

	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				visible: false,
				visible1: false,
				statusNum: 0,
				isLoadMore: false,
				total: 0,
				date: '请选择日期',
				type: '全部状态',
				showList: [],
				typeArr: [{
						value: '0',
						label: '全部状态',
						state: ''
					},
					{
						value: '1',
						label: '待审批',
						state: 'wait'
					},
					{
						value: '2',
						label: '已通过',
						state: 'passed'
					},
					{
						value: '3',
						label: '已拒绝',
						state: 'refused'
					},
					{
						value: '4',
						label: '审批中',
						state: 'pending'
					}
				],
				queryInfo: {
					diff: 'audit',
					date: '',
					state: '',
					page: 0,
					perpage: 10
				}
			};
		},
		methods: {
			searchList(state) {
				this.queryInfo.state = state;
				this.queryInfo.page = 0;
				this.getList()
				this.isLoadMore = false;
			},
			setDateChange(date) {
				this.date = date;
				this.queryInfo.date = date;
				this.queryInfo.page = 0;
				this.getList()
				this.isLoadMore = false;
			},
			loadmore() {
				if (this.visible || this.visible1) {

				} else {
					this.queryInfo.page++;
					this.statusNum = 1;
					this.isLoadMore = true;
					this.loadmoreList();
				}
			},
			// 加载数据
			async loadmoreList() {
				try {
					const res = await House.getHistoryList(this.queryInfo);
					if (res.data.data.length) {
						this.total = res.data.total;
						this.showList = this.showList.concat(res.data.data);
						if (res.data.data.length === this.queryInfo.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.queryInfo.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.queryInfo.page--;
				}
			},
			select(options) {
				this.type = options.label

			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			details(id) {
				uni.navigateTo({
					url: `../details?msg=2&id=${id}&title=审批详情`,
				})
			},
			async getList() {
				try {
					this.$showLoading('加载中');
					const res = await House.getHistoryList(this.queryInfo);
					uni.hideLoading();
					this.total = res.data.total;
					this.showList = res.data.data
					if (res.data.data.length === this.queryInfo.perpage) {
						this.isLoadMore = true;
						this.statusNum = 2;
					}
				} catch (e) {
					uni.hideLoading();
				}
			},

		},
		onShow(){
			this.queryInfo.page = 0
			this.getList()
			// 强制刷新回到顶部
			uni.pageScrollTo({
			    scrollTop: 0,
			});
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list {
		background-color: #f8f8f8;
	}

	.choose {
		height: 105px;
		box-sizing: border-box;
		padding: 20px 50rpx;
		font-size: 14px;
		color: #999999;
		background-color: #FFFFFF;

		.two {
			display: flex;
			height: 32px;
			margin-bottom: 16px;

			.date {
				width: 300rpx;
				height: 28px;
				box-sizing: border-box;
				line-height: 28px;
				border: 1px solid #E9ECF7;
				border-radius: 4px;
				margin-right: 30rpx;

				.uni-input {
					padding-left: 28rpx;
				}

				.date2-img {
					vertical-align: sub;
					width: 36rpx;
					height: 36rpx;
					margin: 0 20upx;
				}

				.date {
					display: flex;
					align-items: center;
					width: 650rpx;
					height: 32px;
					border: 1px solid #E9ECF7;

					font-size: 14px;

					color: #999;

					box-sizing: border-box;
				}

			}

			.select {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 320rpx;
				height: 28px;
				line-height: 28px;
				border-radius: 8rpx;
				border: 1px solid #E9ECF7;
				box-sizing: border-box;
				padding: 0 20rpx 0 40rpx;

				.image {
					transform: rotate(90deg);
					width: 38rpx;
					height: 38rpx;
				}
			}
		}
	}
</style>
